<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部区 -->
        <el-row class="title" type="flex" justify="space-between">
          <el-row type="flex">
            <el-input
              placeholder="角色名称"
              v-model.trim="queryData.role_name"
              clearable
              style="margin-right: 10px"
            >
            </el-input>
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-row>
          <div>
            <el-button type="primary" @click="addHandler">创建角色</el-button>
          </div>
        </el-row>
        <br />
        <!-- 列表内容区 -->
        <el-table
          :header-cell-style="{ color: '#646464', background: '#fafafa' }"
          :data="list"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="角色ID"> </el-table-column>
          <el-table-column prop="role_name" label="角色名称"></el-table-column>
          <el-table-column prop="identify" label="角色标识"></el-table-column>
          <el-table-column
            prop="description"
            label="角色描述"
          ></el-table-column>
          <el-table-column prop="created_at" label="添加时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-row type="flex" justify="center">
                <el-button
                  @click="editHandler(row.id)"
                  type="primary"
                  size="small"
                  circle
                >
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button
                  @click="delHandler(row.id)"
                  type="danger"
                  size="small"
                  circle
                >
                  <i class="el-icon-delete"></i>
                </el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <br />

        <!-- 创建角色弹窗 -->
        <add-role ref="addRole" @updateList="initData" />
        <!-- 分页区 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryData.page"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRoleListApi, delRoleApi, getRoleDetailApi } from '@/api/roleManager'
import AddRole from './components/addRole.vue'
export default {
  name: 'RoleManager',
  components: {
    AddRole,
  },
  data() {
    return {
      queryData: {
        role_name: '',
        page: 1,
        limit: 10,
      },
      list: [], //角色列表
      total: 0,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      let { list, total } = await getRoleListApi(this.queryData)
      this.list = list
      this.total = total
    },
    // 重置
    reset() {
      this.queryData.role_name = ''
      this.initData()
    },
    // 点击创建角色
    addHandler() {
      this.$refs.addRole.isEdit = false
      this.$refs.addRole.showDialog = true
    },
    // 删除角色
    async delHandler(id) {
      try {
        await this.$confirm('确定删除吗,是否继续?', '提示', {
          type: 'warning',
        })
      } catch (error) {
        return this.$message.info('已取消')
      }
      await delRoleApi(id)
      //判断是否是最后一个
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--
      }
      this.$message.success('删除成功')
      this.initData()
    },
    // 编辑角色
    async editHandler(id) {
      // console.log(id);
      let res = await getRoleDetailApi(id)
      console.log(res)
      this.$refs.addRole.formData = res
      this.$refs.addRole.isEdit = true
      this.$refs.addRole.showDialog = true
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryData.limit = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initData()
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  .el-button--primary {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
  .el-button--primary:hover {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
  .el-button--default:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.el-pagination {
  display: flex;
  justify-content: end;
}
</style>
